<template>
	<view class="answer">
		<view class="navs flex align-start justify-between" v-if="title">
			<view class="nav-titles flex align-start">
				<image src="/static/chapter/chapter.png" mode=""></image>
				<text class="nav-title">
					<text>{{ currentPage }}/{{ allList.length }}</text>
				</text>
			</view>
		</view>
		<view class="navs flex align-center " v-else>
			<image src="/static/chapter/chapter.png" mode=""></image>
			<view class="nums">
				<text>{{ currentPage }}/{{ allList.length }}</text>
			</view>
		</view>
		<view class="card">
			<scroll-view style="height: 100%;" :scroll-top="scrollTop[index]" class="scroll-Y"
				@scroll="scroll($event, index)">
				<subject v-if="thisdet.question.options!=null" :info="thisdet.question" @change="handChange"
					:analysis="true" />
				<view>
					<view class="tools">
						<view class="tool" @click="handMusic(thisdet.question)">
							<text>读题</text>
							<image src="/static/skill/tool1.png" mode=""></image>
						</view>
						<view class="tool" @click="collChange(thisdet.question)">
							<text>收藏</text>
							<image v-if="thisdet.question.is_collect" src="/static/skill/coll-a.png" mode="">
							</image>
							<image v-else src="/static/skill/coll.png" mode=""></image>
						</view>
					</view>
					<view style="width: 750rpx;height: 170rpx;"></view>
				</view>
				<view class="tools">
					<view class="bottom_bg">
						<view class="bottom_left_bg" @click="show = true">
							<image src='@/static/topical.png' class="left_img"></image>
							<view class="left_title">
								<text>{{ currentPage }}/{{ allList.length}}</text>
							</view>
						</view>
						<view class="bottom_left_bg" style="width: 70rpx;" @click="handSkill(thisdet)">
							<image src="@/static/skill/skill.png" class="left_img"></image>
							<view class="left_title">
								技巧
							</view>
						</view>
						<view class="bottom_btn" @click="handUp">上一题</view>
						<view class="bottom_btn" style="background-color: #36c269;color: #FFFFFF;"
							@tap="$u.debounce(handNext, 100)">下一题
						</view>
					</view>
				</view>
				<!-- <view class="btns">
					<view class="btn" :style="{height: currentPage === 0 ? '0' : '92rpx'}">
						<button :style="{height: currentPage === 0 ? '0' : '92rpx'}" class="cu-btn nxt-btn up-btn"
							@click="handUp">
							<text>上一题</text>
						</button>
					</view>
					<view class="btn" style="height: 92rpx;">
						<button class="cu-btn nxt-btn down-btn" @click="handNext" style="height: 92rpx;">
							<text>下一题</text>
						</button>
					</view>
				</view> -->
			</scroll-view>
			</swiper-item>
			</swiper>
		</view>
		<skill-pop ref="skill" @music="musicChange" @close="closeMusic" />
		<u-modal v-model="lastShow" :content="lastContent" show-cancel-button confirm-color="#36c269"
			@confirm="handContinue"></u-modal>
		<u-popup v-model="show" mode='bottom' border-radius="28">
			<view class="pop_bg">
				<view style="display: flex;align-items: center;margin-top: 48rpx;">
					<view style="display: flex;align-items: center;" @click="collChange(thisdet)">
						<view class="collect_ttile">收藏</view>
						<image v-if="thisdet.question.is_collect" src="/static/skill/coll-a.png"
							style="width: 40rpx;height: 40rpx;margin-left: 12rpx;"></image>
						<image v-else src="@/static/no_collect.png"
							style="width: 40rpx;height: 40rpx;margin-left: 12rpx;">
						</image>
					</view>
					<view style="margin-left: 88rpx;">
						<u-icon name="checkmark-circle-fill" color="#36C269" size="44"></u-icon>
					</view>
					<view class="number">{{chance_correct}}</view>
					<view style="margin-left: 25rpx;">
						<u-icon name="close-circle-fill" color="#FF0000" size="44"></u-icon>
					</view>
					<view class="number">{{chance_error}}</view>
					<view class="pop_number">
						{{ currentPage }}/{{ allList.length}}
					</view>
				</view>
				<view class="pop_line"></view>
				<scroll-view class="scroll-view" scroll-y="true" :scroll-top="scrollTop">
					<view style="display: flex;flex-wrap: wrap;">
						<view v-for="(item,index) in allList" :key="index" @click="chance_question(item,index)">
							<view class="tag_bg" v-if="item.istrue == undefined">{{index+1}}</view>
							<view class="tag_bg" style="background-color: #36c269;color: #FFFFFF;"
								v-if="item.istrue == 1">{{index+1}}</view>
							<view class="tag_bg" style="background-color: #ff0000;color: #FFFFFF;"
								v-if="item.istrue == 0">{{index+1}}</view>
						</view>
					</view>
				</scroll-view>
			</view>
		</u-popup>
	</view>
</template>

<script>
	import subject from '@/components/subject.vue'
	import skillPop from './components/skillPop.vue'
	let innerAudioContext = null
	import {
		doQuestion,
		doQuestionAll,
		doSkillView,
		questionDetail
	} from '@/api/skill.js'

	import {
		doColl,
		doErrRecord,
		doView,
		getViewRecord,
		addAnswerRecord,
		getAnswerRecord
	} from '@/api/home.js'
	export default {
		components: {
			skillPop,
			subject
		},
		data() {
			return {
				timer: null,
				lastShow: false,
				lastContent: '',
				lastId: '',
				oldId: '',
				isAll: false,
				isColl: false,
				type: 0,
				loading: true,
				current: 0,
				currentPage: 0,
				allList: [],
				title: '',
				list: [],
				swiperList: [],
				scrollTop: [],
				old: [],
				lastId: '',
				//当前题目Id
				qid: '',
				//下一题
				listcurret: 1,
				//下一题
				listcurret: 1,
				// 本题数据
				thisdet: {},
				chaper_id: '',
				lastdet: {},
				swiperList_question: [],
				swiperList_skill: [],
				show: false,
				// 选项正确错误个数
				chance_correct: 0,
				chance_error: 0,
				city: '',
				// 答题的对错记录
				maplist: [],
				skill_paper_id: 0
			}
		},
		async onLoad(options) {
			this.isAll = options?.type === 'all'
			this.type = '0'
			this.skill_paper_id = options.allid
			this.chaper_id = options.id
			this.city = options.city
			uni.setNavigationBarTitle({
				title: '顺序练习'
			})
			// await this.getquestiondet()
			await this.getList(options.id)
			await this.getquestiondet('no', 'no')
			await this.hview()
			await this.getview()
			await this.getAnswer()
			// if (this.lastId) {
			// 	const index = this.allList.findIndex(el => el.id == this.lastId) + 1
			// 	if (index > 2) {
			// 		this.lastContent = `上次看到${index - 1}题，是否继续?`
			// 		this.lastShow = true
			// 	}
			// }
			// this.swiperList = this.allList.filter((el, index) => index <= 4)
			this.current = 1
			this.currentPage = 1

			this.$nextTick(() => {
				this.loading = false
			})
		},
		onUnload() {
			this.closeMusic()
		},
		methods: {
			//添加答题记录
			async addanswer() {
				let type = ''
				let chapterid = null
				if (this.isAll) {
					type = 'paper'
				} else {
					type = 'chapter'
					chapterid = this.chaper_id
				}
				let query = {}
				if (!this.isAll) {
					query = {
						from: 'skill',
						type: type,
						chapter_id: chapterid,
						city: this.city,
						list: this.maplist
					}
				} else {
					query = {
						from: 'skill',
						type: type,
						city: this.city,
						list: this.maplist
					}
				}
				const {
					data
				} = await addAnswerRecord(query)
			},
			//获取答题记录
			async getAnswer() {
				let type = ''
				let chapterid = null
				if (this.isAll) {
					type = 'paper'
				} else {
					type = 'chapter'
					chapterid = this.chaper_id
				}
				let query = {}
				if (!this.isAll) {
					query = {
						from: 'skill',
						type: type,
						chapter_id: chapterid,
						city: this.city,
					}
				} else {
					query = {
						from: 'skill',
						type: type,
						city: this.city,
					}
				}
				const {
					data,
				} = await getAnswerRecord(query)
				if (data != null) {
					if (data.list.length != 0) {
						// this.maplist = data.list
						for (let i = 0; i < data.list.length; i++) {
							for (let j = 0; j < this.allList.length; j++) {
								if (this.allList[j].id_ == data.list[i].id) {
									this.allList[j]['istrue'] = data.list[i].ischancetrue
									if (data.list[i].ischancetrue == 0) {
										this.chance_error += 1
									} else {
										this.chance_correct += 1
									}
								}
							}
						}
						this.$forceUpdate()
					}
				}
			},
			//添加浏览记录
			async getview() {
				let type = ''
				let chapterid = null
				if (this.isAll) {
					type = 'paper'
				} else {
					type = 'chapter'
					chapterid = this.chaper_id
				}
				const {
					data
				} = await doView({
					from: 'skill',
					type: type,
					chapter_id: chapterid,
					question_id: this.allList[this.listcurret - 1].id_,
					question_no: this.currentPage,
					city: this.city,
					skill_paper_id: this.skill_paper_id
				})
			},
			//获取浏览记录
			async hview() {
				let type = ''
				let chapterid = null
				if (this.isAll) {
					type = 'paper'
				} else {
					type = 'chapter'
					chapterid = this.chaper_id
				}
				const {
					data,
				} = await getViewRecord({
					from: 'skill',
					type: type,
					chapter_id: chapterid,
					city: this.city,
					skill_paper_id: this.skill_paper_id
				})
				this.lastdet = data
				if (this.lastdet != null) {
					if (this.lastdet.question_no > 1) {
						this.lastContent = `上次看到${this.lastdet.question_no}题，是否继续?`
						this.lastShow = true
					}
				}
			},
			//添加错题记录
			async goerror(city, questionid) {
				const {
					data
				} = await doErrRecord({
					city: city,
					question_id: questionid
				})
			},
			// 继续做题
			handContinue() {
				this.currentPage = this.lastdet.question_no
				this.listcurret = this.lastdet.question_no
				this.getquestiondet('continue')
			},
			//选择题目
			chance_question(item, index) {
				this.currentPage = index + 1
				this.listcurret = index + 1
				this.show = false
				const currenInfo = this.allList[this.listcurret - 1]
				const isResult = this.swiperList_question.find(el => el.id_ == currenInfo.id_)
				const isskill = this.swiperList_skill.find(el => el.id_ == currenInfo.id_)
				// if (isResult != undefined) {
				// 	this.thisdet.question = isResult
				// 	this.thisdet.skill = isskill
				// } else {
				this.getquestiondet('continue')
				// }
			},
			async getquestiondet(e, whitch) {
				const {
					data
				} = await questionDetail({
					skill_id: this.allList[this.listcurret - 1].id_
				})
				data.question.index = this.listcurret
				if (data.question.type_ == 2 || data.question.type_ == 3) {
					var options = [{
							options_name: data.question.an1_,
							zIndex: 'A',
							value: 1
						},
						{
							options_name: data.question.an2_,
							zIndex: 'B',
							value: 2
						},
						{
							options_name: data.question.an3_,
							zIndex: 'C',
							value: 3
						},
						{
							options_name: data.question.an4_,
							zIndex: 'D',
							value: 4
						},
						{
							options_name: data.question.an5_,
							zIndex: 'E',
							value: 5
						},
						{
							options_name: data.question.an6_,
							zIndex: 'F',
							value: 6
						},
						{
							options_name: data.question.an7_,
							zIndex: 'G',
							value: 7
						},
						{
							options_name: data.question.an8_,
							zIndex: 'H',
							value: 8
						},
						{
							options_name: data.question.an9_,
							zIndex: 'I',
							value: 9
						},
						{
							options_name: data.question.an10_,
							zIndex: 'J',
							value: 10
						},
					]
				}
				if (data.question.type_ == 1) {
					var options = [{
							options_name: '正确',
							zIndex: 'A',
							value: 1
						},
						{
							options_name: '错误',
							zIndex: 'B',
							value: 2
						},
					]
				}
				if (data.voice_file) {
					data.voice_file = data.voice_file.replace('http:', 'https:')
				}
				let istrues = this.$u.deepClone(data.question.answer_true)
				data.question.options = options
				data.question.istrue = istrues
				data.question.result = istrues
				data.question.answer_true = ''
				data.question.selectValue = ''
				
				if (data.question.type_ == 3) {
					data.question.istrue = data.question.istrue.toString().split(' ').map(Number)
				}
				data.question.isfinish = false
				data.question.iscorrect = ''
				data.question.goods_ds = []
				// this.swiperList.push(data)
				this.thisdet = data
				if (this.listcurret != 1 && e == undefined) {
					console.log('触发')
					this.currentPage = this.currentPage + 1
				}
				if (whitch == undefined) {
					this.getview()
				}
			},
			//收藏
			async collChange() {
				const {
					data
				} = await doColl({
					city: this.thisdet.question.city_,
					question_id: this.thisdet.question.id_
				})
				this.thisdet.question.is_collect = !this.thisdet.question.is_collect
				if (this.thisdet.question.is_collect) {
					uni.showToast({
						title: '收藏成功',
						icon: 'none'
					})
				} else {
					uni.showToast({
						title: '取消收藏成功',
						icon: 'none'
					})
				}
			},
			handMusic(e) {
				const url = e.voice_file
				this.closeMusic()

				innerAudioContext = uni.createInnerAudioContext();
				innerAudioContext.obeyMuteSwitch = false;
				innerAudioContext.autoplay = true;

				innerAudioContext.src = url;
				innerAudioContext.onPlay(() => {

				});
			},
			musicChange(url) {
				this.closeMusic()

				innerAudioContext = uni.createInnerAudioContext();
				innerAudioContext.obeyMuteSwitch = false;
				innerAudioContext.autoplay = true;

				innerAudioContext.src = url;
				innerAudioContext.onPlay(() => {

				});
			},
			handSkill(e) {
				this.$refs.skill.showEdit(e.skill)
			},
			async getList(id) {
				this.oldId = id
				const params = {}
				if (this.isAll) {
					params.skill_paper_id = this.skill_paper_id
				} else {
					params.chapter_id = id
				}
				const apis = {
					doQuestionAll,
					doQuestion
				}
				const {
					data
				} = await apis[this.isAll ? 'doQuestionAll' : 'doQuestion'](params)
				this.scrollTop = []
				this.old = []
				this.allList = data
				this.qid = this.allList[this.currentPage].id_
			},
			stopTouchMove() {},
			scroll(e, index) {
				this.old[index].scrollTop = e.detail.scrollTop
			},
			closeMusic() {
				if (innerAudioContext) {
					innerAudioContext.destroy()
					innerAudioContext = null
				}
			},
			handTop() {
				this.scrollTop.forEach((el, index) => {
					if (this.old[index].scrollTop > 10) {
						this.scrollTop[index] = this.old[index].scrollTop
						this.$nextTick(() => {
							this.scrollTop[index] = 0
							this.old[index].scrollTop = 0
						})
					}
				})
			},
			//上一页
			handUp() {
				if (this.currentPage == 1) {
					uni.showToast({
						title: '当前已是第一题',
						icon: 'none'
					})
					return
				}
				this.currentPage = this.currentPage - 1
				this.listcurret = this.listcurret - 1
				const currenInfo = this.allList[this.listcurret - 1]
				const isResult = this.swiperList_question.find(el => el.id_ == currenInfo.id_)
				const isskill = this.swiperList_skill.find(el => el.id_ == currenInfo.id_)
				if (isResult != undefined) {
					this.thisdet.question = isResult
					this.thisdet.skill = isskill
				} else {
					this.getquestiondet("last")
				}
			},
			handNext() {
				if (this.allList.length == this.currentPage) {
					uni.showToast({
						title: '已经到最后一题了',
						icon: 'none'
					})
					return
				}
				this.qid = this.allList[this.currentPage - 1].id_
				this.listcurret = this.listcurret + 1
				const currenInfo = this.allList[this.listcurret - 1]
				const isResult = this.swiperList_question.find(el => el.id_ == currenInfo.id_)
				const isskill = this.swiperList_skill.find(el => el.id_ == currenInfo.id_)
				if (isResult != undefined) {
					this.currentPage = this.currentPage + 1
					this.thisdet.question = isResult
					this.thisdet.skill = isskill
				} else {
					this.getquestiondet()
				}
				this.closeMusic()
			},
			handChange(e, info) {
				if (this.thisdet.question.type_ == '3') {
					this.thisdet.question = info
				}
				//单选判断
				if (this.thisdet.question.type_ != '3') {
					if (this.thisdet.question.istrue == e) {
						this.thisdet.question.answer_true = e
						this.thisdet.question.selectValue = e
						if (this.allList[this.listcurret - 1].istrue == undefined)
							this.chance_correct = this.chance_correct + 1
						if (this.allList[this.listcurret - 1].istrue == 0) {
							this.chance_error = this.chance_error - 1
							this.chance_correct = this.chance_correct + 1
						}
						this.allList[this.listcurret - 1].istrue = 1
						// console.log('111')
					} else {
						if (this.allList[this.listcurret - 1].istrue == undefined)
							this.chance_error = this.chance_error + 1
						if (this.allList[this.listcurret - 1].istrue == 1) {
							this.chance_correct = this.chance_correct - 1
							this.chance_error = this.chance_error + 1
						}
						this.allList[this.listcurret - 1].istrue = 0
						this.thisdet.question.selectValue = e
						this.goerror(this.thisdet.question.city_, this.thisdet.question.id_)
					}
				}
				// 多选题
				else {
					const isArrEqual = (arr1, arr2) => {
						return arr1.length === arr2.length && arr1.every((ele) => {
							return arr2.includes(ele)
						});
					};
					if (isArrEqual(this.thisdet.question.istrue, e)) {
						console.log('回答正确');
						this.thisdet.question.answer_true = e
						this.thisdet.question.selectValue = e
						if (this.allList[this.listcurret - 1].istrue == undefined)
							this.chance_correct = this.chance_correct + 1
						if (this.allList[this.listcurret - 1].istrue == 0) {
							this.chance_error = this.chance_error - 1
							this.chance_correct = this.chance_correct + 1
						}
						this.allList[this.listcurret - 1].istrue = 1
					} else {
						console.log('回答错误');
						if (this.allList[this.listcurret - 1].istrue == undefined)
							this.chance_error = this.chance_error + 1
						if (this.allList[this.listcurret - 1].istrue == 1) {
							this.chance_correct = this.chance_correct - 1
							this.chance_error = this.chance_error + 1
						}
						this.thisdet.question.selectValue = e
						this.goerror(this.thisdet.question.city_, this.thisdet.question.id_)
						this.allList[this.listcurret - 1].istrue = 0
					}
				}
				if (this.thisdet.question.answer_true) {
					if (this.currentPage != this.allList.length) {
						setTimeout(() => {
							if (this.currentPage < this.listcurret) {
								this.currentPage = this.currentPage + 1
								return
							} else
								this.listcurret = this.listcurret + 1
							this.qid = this.allList[this.currentPage - 1].id_
							this.getquestiondet()
						}, 600)
					} else {
						uni.showToast({
							title: '已经到最后一题了',
							icon: 'none'
						})
					}
				}
				let date = {
					id: this.thisdet.skill.id_,
					ischancetrue: this.allList[this.listcurret - 1].istrue,
				}
				if (this.maplist.length != 0) {
					const isResult = this.maplist.find(el => el.id == date.id)
					if (isResult == undefined) {
						this.maplist.push(date)
					} else {
						for (let i in this.maplist) {
							if (this.maplist[i].id == isResult.id) {
								this.maplist[i] = date
							}
						}
					}
				} else {
					this.maplist.push(date)
				}
				this.addanswer()
				this.swiperList.push(this.thisdet)
				this.thisdet.question.id_ = this.thisdet.skill.id_
				this.swiperList_question.push(this.thisdet.question)
				this.swiperList_skill.push(this.thisdet.skill)
			}
		}
	}
</script>

<style lang="scss" scoped>
	.answer {
		height: 100vh;
		background-color: #F5F6F9;
		display: flex;
		flex-direction: column;

		.navs {
			width: 750rpx;
			box-sizing: border-box;
			padding: 29rpx 36rpx;

			image {
				width: 34rpx;
				height: 34rpx;
			}

			.nav-titles {
				image {
					position: relative;
					top: 5rpx;
				}
			}

			.nav-title {
				flex: 1;
				font-size: 34rpx;
				font-family: PingFang SC;
				font-weight: 500;
				color: #838A9D;
				margin: 0 20rpx 0 15rpx;

			}


			.nums {
				margin-left: 15rpx;
				font-size: 34rpx;
				font-family: PingFang SC;
				font-weight: 400;
				color: #838A9D;
			}
		}
	}

	.card {
		flex: 1;

		.scroll-Y {
			height: 100%;
		}

		.tools {
			padding: 20rpx 30rpx;
			width: 702rpx;
			margin: 34rpx auto 0 auto;
			display: flex;
			align-items: center;
			justify-content: space-between;
			overflow: hidden;

			.tool {
				display: flex;
				align-items: center;
				background-color: #03BE7A;
				color: #fff;
				padding: 14rpx 52rpx;
				border-radius: 42rpx;

				&:nth-child(2) {
					background-color: #FE831C;
				}

				&:last-child {
					background-color: #36c269;
				}

				text {
					font-size: 38rpx;
					font-family: PingFang SC-Medium, PingFang SC;
					font-weight: 500;
					color: #fff;
				}

				image {
					width: 40rpx;
					height: 40rpx;
					margin-left: 8rpx;
				}
			}
		}

		.btns {
			margin-top: 80rpx;
		}

		.btn {
			width: 702rpx;
			margin: 40rpx auto 0 20rpx;


			.nxt-btn {
				width: 100%;
				height: 92rpx;
				background: #E3E3E3;
				border-radius: 20rpx;
				height: 0;
				overflow: hidden;
				transition: height 0.25s;
				font-size: 34rpx;
			}

			.up-btn {
				font-size: 34rpx;
				font-family: PingFang SC;
				font-weight: 500;
				color: #838A9D;
			}

			.down-btn {
				background-color: #36c269;
				color: #FFFFFF;
				font-size: 34rpx;
			}
		}
	}

	.bottom_bg {
		position: fixed;
		bottom: 0rpx;
		width: 770rpx;
		height: 200rpx;
		display: flex;
		// align-items: center;
		margin-left: -70rpx;
		padding-top: 14rpx;
		background-color: #FFFFFF;

		.bottom_left_bg {
			width: 120rpx;
			margin-left: 30rpx;
			text-align: center;

			.left_img {
				width: 48rpx;
				height: 48rpx;
			}

			.left_title {
				font-size: 26rpx;
				font-family: PingFang SC-Medium, PingFang SC;
				font-weight: 500;
				color: #535371;
				margin-top: 8rpx;
			}
		}

		.bottom_btn {
			width: 204rpx;
			height: 88rpx;
			background: #E3E3E3;
			border-radius: 16rpx;
			display: flex;
			align-items: center;
			justify-content: center;
			font-size: 32rpx;
			font-family: PingFang SC-Regular, PingFang SC;
			font-weight: 400;
			color: #333333;
			margin-left: 32rpx;
		}
	}

	.pop_bg {
		width: 750rpx;
		height: 874rpx;
		background: #FFFFFF;

		.collect_ttile {
			font-size: 40rpx;
			font-family: PingFang SC-Regular, PingFang SC;
			font-weight: 400;
			color: #333333;
			margin-left: 46rpx;
		}

		.number {
			width: 60rpx;
			font-size: 32rpx;
			font-family: PingFang SC-Regular, PingFang SC;
			font-weight: 400;
			color: #333333;
			margin-left: 14rpx;
		}

		.pop_number {
			font-size: 40rpx;
			font-family: PingFang SC-Regular, PingFang SC;
			font-weight: 400;
			color: #333333;
			text-align: right;
			width: 130rpx;
			margin-left: 65rpx;
		}

		.pop_line {
			width: 702rpx;
			height: 1rpx;
			opacity: 1;
			background-color: #DDDDDD;
			margin: 0 auto;
			margin-top: 42rpx;
		}

		.scroll-view {
			white-space: nowrap;
			height: 680rpx;
			width: 100%;
			margin-top: 48rpx;

			.tag_bg {
				width: 94rpx;
				height: 78rpx;
				background: #F5F5F5;
				border-radius: 12rpx;
				display: flex;
				align-items: center;
				justify-content: center;
				font-size: 36rpx;
				font-family: PingFang SC-Regular, PingFang SC;
				font-weight: 400;
				color: #333333;
				margin-top: 26rpx;
				margin-left: 28rpx;
			}

			.enter_tag_bg {
				width: 94rpx;
				height: 78rpx;
				background: #F5F5F5;
				border-radius: 12rpx;
				display: flex;
				align-items: center;
				justify-content: center;
				font-size: 36rpx;
				font-family: PingFang SC-Regular, PingFang SC;
				font-weight: 400;
				color: #333333;
				margin-top: 26rpx;
				margin-left: 28rpx;
			}
		}
	}
</style>